<template>
  <div v-if="hide">
    <el-row v-for="(row, type) in startList" :key="type">
      <el-col :span="2" v-for="(item, index) in row" :key="index">
        <el-button
          @click="golist(type, item, index, showC(type, item, index))"
          :type="showC(type, item, index)"
          >{{ item }}</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
function groupSplit(arr = [], size = 2) {
  let r = []; //result

  const _ = (t, a, n) => {
    //tempArr, arr, num
    if (n === 0) {
      r[r.length] = t;
      return;
    }
    for (var i = 0, l = a.length - n; i <= l; i++) {
      var b = t.slice();
      b.push(a[i]);
      _(b, a.slice(i + 1), n - 1);
    }
  };
  _([], arr, size);
  return r;
}

export default {
  name: "index",
  data() {
    return {
      prolist: [
        {
          color: "亮黑色",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "耳机套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "电视果套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "耳机套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "银粉金",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "银粉金",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "耳机套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "电视果套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "耳机套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "银粉金",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "银粉金",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        }
      ],
      hide: false, //控制重新渲染
      selectlist: {
        // 选择列表
      },
      startList: {
        //初次渲染属性列表
      },
      filterList: {
        // 过滤商品列表
      },
      queList: {
        //确认渲染属性列表
      }
    };
  },
  beforeMount() {
    let altObj = JSON.parse(JSON.stringify(this.prolist[0]));
    delete altObj.PRICE;
    let alt = Object.keys(altObj);

    this.searchList = groupSplit(alt, 2);

    for (let i of alt) {
      this.startList[i] = [...new Set(this.prolist.map(item => item[i]))];
      this.selectlist[i] = 0;
    }
    this.changeData();
  },
  methods: {
    changeData() {
      this.hide = false;
      let alt = Object.keys(this.selectlist);
      const LIST = JSON.parse(JSON.stringify(this.prolist));
      // const LIST = this.prolist.map(v => Object.assign({}, v));
      for (let i of alt) {
        let searchA = alt.filter(v => v !== i);

        let arr = LIST;
        searchA.forEach(j => {
          arr = arr.filter(
            item => item[j] === this.startList[j][this.selectlist[j]]
          );
        });

        this.queList[i] = arr.map(v => v[i]);
      }

      this.$nextTick(() => {
        this.hide = true;
      });
    },
    showC(type, item, index) {
      return index === this.selectlist[type]
        ? "primary"
        : this.queList[type].includes(item)
        ? "success"
        : "info";
    },
    golist(type, item, index, event) {
      switch (event) {
        case "primary":
          this.$message.info("已选择");
          break;
        case "success":
          this.selectlist[type] = index;
          this.changeData();
          break;
        case "info":
          this.$message.error("请选择可选项");
          break;

        default:
          break;
      }
    }
  }
};
</script>
